fix: manga page now indicates what chapter you are reading

6 files changed, 49 insertions, 5 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
new file mode 100644
index 0000000..c368f75
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+import styles from "./read.module.css";
+
+export default function CurrentReading() {
+	const [chapter, setChapter] = useState(null);
+	const [volume, setVolume] = useState(null);
+
+	useEffect(() => {
+		setChapter(localStorage.getItem("chapter") || "");
+		setVolume(localStorage.getItem("volume") || "");
+	});
+
+	return CR(chapter, volume);
+}
+
+function CR(chapter, volume) {
+	return (
+		<div className={styles.CurrentReadingContainer}>
+			{chapter && volume && (
+				<p>
+					Vol {volume} Chapter {chapter}
+				</p>
+			)}
+		</div>
+	);
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 7369ba0..e584ee2 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,6 +1,7 @@
 import styles from "./read.module.css";
 import Image from "next/image";
 import DownloadManga from "./download";
+import CurrentReading from "./currentReading";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -23,6 +24,7 @@ export default async function Read({ params }) {
 
 	return (
 		<div className={styles.Main}>
+			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
 				{images &&
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index d240d80..a95dcfe 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -49,6 +49,13 @@
 	background-color: var(--pastel-red);
 }
 
+.CurrentReadingContainer {
+	text-align: center;
+	color: white;
+	font-family: "Quicksand";
+	font-size: 18px;
+}
+
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 95%;
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index eec62b9..19da1d3 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -1,7 +1,9 @@
+"use client";
+
 import styles from "./info.module.css";
 import Link from "next/link";
 
-export default async function Buttons({ content: data }) {
+export default function Buttons({ content: data }) {
 	return (
 		<div className={styles.ChapterContainer}>
 			{data.chapters &&
@@ -12,10 +14,10 @@ export default async function Buttons({ content: data }) {
 								key={index}
 								href={{
 									pathname: `/manga/info/read/${item.id}`,
-									query: {
-										name: item.title,
-									},
 								}}
+								onClick={() =>
+									test(item.chapterNumber, item.volumeNumber)
+								}
 							>
 								<button key={index}>
 									<div>
@@ -30,3 +32,8 @@ export default async function Buttons({ content: data }) {
 		</div>
 	);
 }
+
+function test(chapter, volume) {
+	localStorage.setItem("chapter", chapter);
+	localStorage.setItem("volume", volume);
+}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 6108766..5bb13fe 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -133,7 +133,7 @@
 }
 
 .ChapterContainer button:focus {
-	opacity: 0.6;
+	opacity: 0.7;
 	transition: transform 0.2s linear;
 	background-color: var(--pastel-red);
 	transform: scale(0.9);
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 3038b3f..dc4c682 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
+import CurrentReading from "./[read]/currentReading";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;